<template>
  <div>
    <div>
      <el-button
          type="primary"
          @click="dialogCreateUserVisible = true"
          plain>
        创建发货人账户
      </el-button>

      <el-dialog title="创建发货人账户" :visible.sync="dialogCreateUserVisible">
        <el-form :model="UserForm" :rules="Userrules" ref="UserForm">
          <el-form-item label="账户id" :label-width="formLabelWidth" prop="shipper">
            <el-input v-model="UserForm.id" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth" prop="description">
            <el-input v-model="UserForm.name" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="账户密码" :label-width="formLabelWidth" prop="account_region">
            <el-input v-model="UserForm.password" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogCreateUserVisible = false">取 消</el-button>
          <el-button type="primary" @click="CreateUserSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

<!--    样式代码-->
    <div style="height: 20px"></div>

    <div>
      <el-button
          type="primary"
          @click="dialogCreateOrderVisible = true"
          plain>
        创建发货订单
      </el-button>

      <el-dialog title="创建发货订单" :visible.sync="dialogCreateOrderVisible">
        <el-form :model="OrderForm" :rules="Orderrules" ref="OrderForm">
          <el-form-item label="货物名称" :label-width="formLabelWidth" prop="order_status">
            <el-input v-model="OrderForm.goods" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="收件地址" :label-width="formLabelWidth" prop="shipping_address">
            <el-input v-model="OrderForm.destination" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="寄件地址" :label-width="formLabelWidth" prop="delivery_address">
            <el-input v-model="OrderForm.delivery_address" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="托运人" :label-width="formLabelWidth" prop="shipper">
            <el-input v-model="OrderForm.shipper" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="托运人id" :label-width="formLabelWidth" prop="delivery_address">
            <el-input v-model="OrderForm.shipper_id" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="收件人" :label-width="formLabelWidth" prop="receiver">
            <el-input v-model="OrderForm.consignee" autocomplete="off" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogCreateOrderVisible = false">取 消</el-button>
          <el-button type="primary" @click="CreateOrderSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--    样式代码-->
    <div style="height: 20px"></div>

    <div>
      <el-form :inline="true" :model="SearchBillsForm">
        <el-form-item>
          <el-input v-model="SearchBillsForm.shipment" placeholder="请输入货物">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="SearchBillsSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%">
        <el-table-column
            prop="bills_id"
            label="账单ID">
        </el-table-column>
        <el-table-column
            prop="shipper"
            label="托运人">
        </el-table-column>
        <el-table-column
            prop="fee"
            label="费用">
        </el-table-column>
        <el-table-column
            prop="shipment"
            label="货物">
        </el-table-column>
      </el-table>
    </div>

    <!--    样式代码-->
    <div style="height: 20px"></div>

    <div>
      <el-form :inline="true" :model="SearchStateForm">
        <el-form-item>
          <el-input v-model="SearchStateForm.id" placeholder="请输入id">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="SearchStateSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
          :data="tableData1"
          stripe
          border
          style="width: 100%">
        <el-table-column
            prop="order_id"
            label="订单ID">
        </el-table-column>
        <el-table-column
            prop="order_state"
            label="物流状态">
        </el-table-column>
        <el-table-column
            prop="time"
            label="时间">
        </el-table-column>
        <el-table-column
            prop="shipment"
            label="货物">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DemoIndex",
  data() {
    return {
      dialogCreateUserVisible: false,
      UserForm: {
        id: '',
        name: '',
        password: ''
      },
      Userrules: {
        id: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ],
        name: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ],
        password: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ]
      }
      ,
      formLabelWidth: '120px',

      dialogCreateOrderVisible: false,
      OrderForm: {
        destination: '',
        delivery_address: '',
        shipper: '',
        shipper_id:'',
        consignee:'',
        goods: ''
      },
      Orderrules: {
        destination: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ],
        delivery_address: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ],
        shipper: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ],
        shipper_id: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ],
        consignee: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ],
        goods: [
          { required:true,message: '请输入内容',trigger:'blur' }
        ]
      },

      SearchBillsForm: {
        shipment: ''
      },
      tableData: [],
      BillsForm: {
        bills_id: '',
        shipper: '',
        fee: '',
        shipment: ''
      },

      SearchStateForm:{
        id: ''
      },
      tableData1: [],
      StateForm:{
        order_id: '',
        order_state: '',
        time: '',
        shipment: ''
      }
    }
  },
  methods:{
    CreateUserSubmit(){
      const format = new FormData();
      format.append("id",this.UserForm.id);
      format.append("name",this.UserForm.name);
      format.append("password",this.UserForm.password);
      this.$refs.UserForm.validate((valid) => {
        if (valid) {
          axios({
            headers: {
              'Content-Type': 'application/json'
            },
            method: "post",
            data: format,
            url: this.$store.state.globalUrl + '/User/CreateAccount'
          })
              .then(res => {
                console.log(res)
                this.$refs.UserForm.resetFields();
                this.dialogCreateUserVisible = false;
              }).catch(error => {
                console.log(error)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    CreateOrderSubmit(){
      const format = new FormData();
      format.append("destination",this.OrderForm.destination);
      format.append("delivery_address",this.OrderForm.delivery_address);
      format.append("shipper",this.OrderForm.shipper);
      format.append("shipper_id",this.OrderForm.shipper_id);
      format.append("consignee",this.OrderForm.consignee);
      format.append("goods",this.OrderForm.goods)
      this.$refs.OrderForm.validate((valid) => {
        if (valid) {
          axios({
            headers: {
              'Content-Type': 'application/json'
            },
            method: "post",
            data: format,
            url: this.$store.state.globalUrl + '/Order/CreateOrder'
          })
              .then(res => {
                console.log(res)
                this.$refs.OrderForm.resetFields();
                this.dialogCreateOrderVisible = false;
              }).catch(error => {
            console.log(error)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    SearchBillsSubmit(){
      axios({
        headers: {
          'Content-Type': 'application/json'
        },
        method:"get",
        url: this.$store.state.globalUrl + "/Bills/SearchBills?shipment="+this.SearchBillsForm.shipment
      })
          .then(res => {
            console.log(res.data)
            this.tableData = res.data;
          }).catch(error => {
        console.log(error);
      });
    },
    SearchStateSubmit(){
      axios({
        headers: {
          'Content-Type': 'application/json'
        },
        method:"get",
        url: this.$store.state.globalUrl + "/State/SearchState?order_id="+this.SearchStateForm.id
      })
          .then(res => {
            console.log(res.data)
            this.tableData1 = res.data;
          }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

<style scoped>

</style>